<template>
  <div class="hot">
    <div class="lunbotu">
      <div
        class="bg"
        :style="`background-image: url(${this.lunbo[this.lunboNum].imageUrl});`"
      >
        <div class="w">
          <div class="prev" @click="prev"></div>
          <div class="next" @click="next"></div>
          <ul class="lunbo">
            <li
              v-for="(item, index) in lunbo"
              :key="index"
              :class="{ xian: index == lunboNum, li: true }"
            >
              <img :src="this.lunbo[this.lunboNum].imageUrl" alt="" />
            </li>
          </ul>
          <div class="lunbo-right">
            <router-link :to="{ name: 'Down' }" class="down"></router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="gedan">
          <div class="nav">
            <div class="nav-left">
              <a class="big-a" href="#">热门推荐</a>
              <div class="nav-a">
                <a href="#">华语</a>
                <a href="#">流行</a>
                <a href="#">摇滚</a>
                <a href="#">民谣</a>
                <a href="#">电子</a>
              </div>
            </div>
            <a class="more" href="#">更多</a>
          </div>
          <div class="gedan-content">
            <list :res2="res2"></list>
            <div class="newge">
              <div class="newge-top">
                <router-link class="new-top-a" to="/newsing"
                  >新碟上新</router-link
                >
                <router-link class="new-top-a2" to="/newsing">更多</router-link>
              </div>
              <div>
                <div class="newge-content">
                  <ul class="newge-ul" ref="ul">
                    <li v-for="item in newsinger" :key="item">
                      <div class="newge-img-box">
                        <img :src="item.picUrl" alt="" />
                        <a
                          href="javascript:;"
                          class="new-bofang"
                          @click="newbofang(item.id)"
                        ></a>
                      </div>
                      <p class="newge-name">{{ item.name }}</p>
                      <p class="newge-company">{{ item.company }}</p>
                    </li>
                  </ul>
                  <a
                    @click="newgeprev"
                    class="newge-left"
                    href="javascript:;"
                  ></a>
                  <a
                    @click="newgenext"
                    class="newge-right"
                    href="javascript:;"
                  ></a>
                </div>
              </div>
            </div>
            <div class="bangdan">
              <div class="bangdan-top">
                <router-link to="paihang" class="bangdan-top-left"
                  >榜单</router-link
                >
                <router-link :to="{ name: 'Paihang' }" class="bangdan-top-right"
                  >更多</router-link
                >
              </div>
              <div class="bangdan-content">
                <div class="bangdan-content-bg">
                  <biaoge :biaosheng="biaosheng"></biaoge>
                  <biaoge :biaosheng="xinge"></biaoge>
                  <biaoge :biaosheng="yuanchuang"></biaoge>
                </div>
              </div>
            </div>
          </div>
          <div></div>
        </div>
      </div>
      <div class="content-right"></div>
    </div>
  </div>
  <navBotton></navBotton>
</template>

<script>
import {
  getContent,
  getbiaosheng,
  getxinge,
  getyuanchuang,
} from "@/api/hot.js";
import list from "../components/list.vue";
import Biaoge from "../components/biaoge.vue";
import http from "@/util/http.js";
import navBotton from "../components/nav-botton.vue"
export default {
  components: { list, Biaoge, navBotton },
  data() {
    return {
      lunbo: [],
      lunboNum: 0,
      time: "",
      nav: [],
      res2: [],
      newsinger: [],
      biaosheng: [],
      xinge: [],
      yuanchuang: [],
    };
  },
  methods: {
    lunboimg() {
      this.time = setInterval(() => {
        this.lunboNum >= 8 ? (this.lunboNum = 0) : this.lunboNum++;
      }, 2000);
    },
    prev() {
      this.lunboNum <= 0 ? (this.lunboNum = 8) : this.lunboNum--;
      clearInterval(this.time);
      this.lunboimg();
    },
    next() {
      this.lunboNum >= 8 ? (this.lunboNum = 0) : this.lunboNum++;
      clearInterval(this.time);
      this.lunboimg();
    },
    newgeprev() {
      this.$refs.ul.style.right = "0px";
    },
    newgenext() {
      this.$refs.ul.style.right = "690px";
    },
    newbofang(id) {
      this.$store.state.id = id;
    },
  },
  async created() {
    let res = await http
      .get("banner", {
        params: {
          type: 0,
        },
      })
      .then((res) => res.data);
    this.lunbo = res.banners;
    this.lunboimg();

    let res1 = await http.get("/playlist/hot").then((res) => res.data);
    this.nav = res1.tags;

    let res2 = await getContent();
    this.res2 = res2.result;

    let newsinger = await http
      .get("/top/album", {
        params: {
          limit: 10,
          type: "new",
        },
      })
      .then((res) => res.data);
    this.newsinger = newsinger.albums;

    let biaosheng = await getbiaosheng();
    console.log(biaosheng.playlist);
    this.biaosheng = biaosheng.playlist;

    let xinge = await getxinge();
    console.log(xinge.playlist);
    this.xinge = xinge.playlist;

    let yuanchuang = await getyuanchuang();
    this.yuanchuang = yuanchuang.playlist;
  },
};
</script>

<style lang="less" scoped>
.bangdan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 35px;
  border-bottom: 2px solid #c10d0c;
  .bangdan-top-left,
  .bangdan-top-right {
    font-size: 12px;
    color: #666;
  }
  .bangdan-top-left {
    font-size: 20px;
  }
}
.bangdan-content-bg {
  background-color: #f4f4f4;
  display: flex;
}
.newge-content {
  padding: 25px 0px 10px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 37px;
  border: 1px solid #d3d3d3;
  width: 709px;
  height: 133px;
  overflow: hidden;
  background-color: rgb(245, 245, 245);
  position: relative;
  .newge-left,
  .newge-right {
    position: absolute;
    width: 8px;
    height: 14px;
    top: 75px;
  }
  .newge-left {
    background: url("../imgs/index.png") no-repeat -265px -77px;
    left: 5px;
  }
  .newge-right {
    background: url("../imgs/index.png") no-repeat -305px -77px;
    right: 5px;
  }
}
.newge-ul {
  display: flex;
  height: 133px;
  width: 709px;
  position: absolute;
  transition: all 2s;
  li {
    margin-left: 20px;
    .newge-img-box {
      background: url("../imgs/coverall.png") no-repeat 0 -570px;
      width: 118px;
      height: 101px;
      position: relative;
    }
    .new-bofang {
      position: absolute;
      background: url("../imgs/iconall.png") no-repeat 0 -85px;
      width: 22px;
      height: 22px;
      bottom: 5px;
      right: 25px;
      display: none;
    }
    .new-bofang:hover {
      background: url("../imgs/iconall.png") no-repeat 0 -110px;
    }
  }
  li:hover .new-bofang {
    display: block;
  }
}
.newge-company,
.newge-name {
  font-size: 12px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newge-img-box {
  img {
    width: 100px;
    height: 100px;
  }
}
.newge-top {
  display: flex;
  justify-content: space-between;
  a {
    font-size: 12px;
    color: #666;
  }
  .new-top-a {
    font-size: 20px;
    font-weight: normal;
    line-height: 28px;
    color: #666;
    margin-left: 20px;
  }
}
.nav-left {
  display: flex;
  align-items: center;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;
  .big-a {
    font-size: 20px;
    font-weight: 400;
    color: #666;
  }
  .nav-a > a {
    margin-left: 10px;
    font-size: 12px;
    color: #666;
  }
  .more {
    font-size: 12px;
  }
}
.content-left {
  margin-right: 251px;
  .gedan {
    padding: 20px 20px 40px;
  }
}
.content {
  width: 980px;
  margin: auto;
  background-color: #fff;
}
.prev,
.next {
  width: 37px;
  height: 63px;
  position: absolute;
  top: 100px;
}
.prev {
  background: url("../imgs/banner.png") no-repeat 0 -430px;
  left: -68px;
}
.next {
  background: url("../imgs/banner.png") no-repeat 0 -578px;
  right: -68px;
}
.bg {
  height: 285px;
  background-size: 1000% 1000%;
}
.w {
  width: 985px;
  height: 100%;
  margin: auto;
  position: relative;
  .lunbo > .li {
    position: absolute;
    opacity: 0;
    transition: all 2s;
    z-index: 10;
  }
  .lunbo > .xian {
    opacity: 1;
  }
  .lunbo > li > img {
    height: 285px;
  }
  .lunbo-right {
    position: absolute;
    right: 0px;
    z-index: 11;
    background: url("../imgs/download.png") no-repeat 0 0;
    width: 254px;
    height: 285px;
    a {
      position: absolute;
      top: 185px;
      left: 19px;
      background: none;
      width: 215px;
      height: 56px;
    }
    a:hover {
      background: url("../imgs/download.png") no-repeat 0 -289px;
    }
  }
}
</style>